<template>
    <el-table :data="modelValue">
        <el-table-column align="center" width="50">
            <template #header>
                <el-icon color="#000" size="14px" @click="addItem">
                    <Plus />
                </el-icon>
            </template>
            <template #default="{ $index }">
                <el-icon color="#000" size="14px" @click="removeItem($index)">
                    <Minus />
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column align="center" width="100">
            <template #header><span class="header">Label</span></template>
            <template #default="{ row }">
                <el-input v-model="row.label" @input.capture="(el)=>refreshSelected(el,row.label)"></el-input>
            </template>
        </el-table-column>
        <el-table-column align="center" width="100">
            <template #header class="header"><span class="header">Value</span></template>
            <template #default="{ row }">
                <el-input v-model="row.value" :type="row.number?'number':''"></el-input>
            </template>
        </el-table-column>
        <el-table-column align="center" width="100">
            <template #header class="header"><span class="header">Number</span></template>
            <template #default="{ row }">
                <el-checkbox v-model="row.number"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column align="center" width="100">
            <template #header class="header"><span class="header">Disabled</span></template>
            <template #default="{ row }">
                <el-checkbox v-model="row.disabled"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column align="center" width="100">
            <template #header class="header"><span class="header">Selected</span></template>
            <template #default="{ row }">
                <el-radio v-model="selected" :label="row.label" :disabled="row.disabled"><span></span></el-radio>
            </template>
        </el-table-column>


    </el-table>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { selectOptionsType } from './index.vue'
let props = defineProps<{
    modelValue: selectOptionsType,
    selected: string
}>()
let emit = defineEmits<{
    (e: 'update:modelValue', arg: selectOptionsType): void
    (e: 'update:selected', arg: string): void
}>()
watch(() => props.selected, (newVal) => {
    emit('update:selected', newVal)
})
let refreshSelected=(el:any,oldVal:string)=>{ //动态更改选中的目标，防止bug
    let newVal=el.target.value
    if(props.selected===oldVal){
        emit('update:selected',newVal)
    }
}
let addItem = () => {
    props.modelValue.push({ label: '', value: '', number: false, disabled: false })
}
let removeItem = (index: number) => {
    props.modelValue.splice(index, 1)
}
</script>

<style scoped>
.header {
    font-size: 14px;
}
</style>